<template>
    <div class="home-classic">
        <h1>经典歌单</h1>
        <div class="wrapper" ref="wrapper">
         <ul class="content" ref="content">
            <li v-for="(item,index) in listData" :key="index">
                <div class="cover_url_big">
                    <van-image :src="item.cover_url_big" radius="10" />
                    <span>{{ item.access_num | numFilter(2)}}万</span>
                </div>
                <span>{{ item.title }}</span>
            </li>
        </ul>  
    </div>
</div>
</template>

<script>
import { betterScrollHorizontal } from "../../common/betterScroll";
export default  {
    data(){
        return{
            listData:[]
        }
    },

    created() {
        this.getSongListData()
    },

    methods:{
        //获取经典歌单数据
        getSongListData(){
            this.$request('get','/recommend/playlist')
            .then( res=>{
                console.log(res)
                if(res.result == 100){
                    this.listData = res.data.list
                }
                //函数调用，调用横向滚动的方法
                betterScrollHorizontal(
                    this,
                    this.$refs.wrapper,
                    this.$refs.content,
                    this.listData.length,
                    10
                );
        //         //异步数据的一些处理
        //         this.betterScrollHorizontal(this.listData.length,10);//调用横向滚动的方法
        //         })
        // },
        //         //封装一个横向滚动的方法
        //         betterScrollHorizontal(num, itemWidth){
        //             //计算内容区(content)的宽度
        //             this.$refs.content.style.width = num * itemWidth + "rem";
        //             this.$nextTick(() => {
        //             //wrapper为template中容器的ref，表示给那个元素来设置滚动
        //             this.scroll = new BScroll(this.$refs.wrapper, {
        //                 startX:0,
        //                 scrollY:false,
        //                 scrollX:true
        //         })
                    
                })
            }
    },
    // filters:{
    //     //处理播放器的显示格式
    //     numFilter(value,num){
    //         //把小数位固定为num位
    //         return parseFloat(value/10000).toFixed(num)
    //     }
    // }

    }
</script>

<style scoped>
/* .home-classic>ul{
    display: flex;
    flex-wrap: wrap;
}
.home-classic>ul>li{
    width: calc((100% - 1rem) / 3 * 1);
}
.home-classic>ul>li:nth-of-type(3n+2){
    margin-left: 0.5rem;
    margin-right: 0.5rem;
} */
.cover_url_big{
    position: relative;
}
.cover_url_big > span {
    position: absolute;
    right: 0rem;
    bottom: 0.4rem;
    background-color: #a6a0a0;
    color: white;
    width: 5rem;
    border-radius: 1rem;
}
 .wrapper {
    width: 100%;
    overflow: hidden;
 }
 /* ul.content {
    width: calc(12 * 10rem);
 } */
 ul.content li {
    display: inline-block;
    width: 10rem;
    vertical-align: top;
 }
 ul.content li * {
    margin: 0.1rem;
 }
 ul.content li > span {
    font-size: 0.8rem;
    color: #625858;
 }

</style>
